<template>
	<view class="goods-main">
		
		<unifab @dragClick="devicecheckByScan" creatTop="80" creatLeft="85" image="/static/saoma.png" imageWidth="60upx">
		</unifab>
		<z-paging style="height: 100% !important;" class="wrap" ref="paging" v-model="goodsList" @query="queryList">
			<cu-custom slot="top" bgColor="bg-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">点检设备列表</block>
			</cu-custom>
			<sl-filter :themeColor="themeColor" :menuList="menuList" @result="result" @resetMenuList="resetMenuList"></sl-filter>
			<!-- 头部开始 -->
			<view class="goods-header-wrap">
				<view class="goods-header-item" :class="{'goods-header-item-action' : 0 == goodsNav}" @click="setNav(0)">全部
				</view>
				<view class="goods-header-item" :class="{'goods-header-item-action' : 1== goodsNav}" @click="setNav(1)">正常
				</view>
				<view class="goods-header-item" :class="{'goods-header-item-action' : 2 == goodsNav}" @click="setNav(2)">维修中
				</view>
				<view class="goods-header-item" :class="{'goods-header-item-action' : 3 == goodsNav}" @click="setNav(3)">故障
				</view>
			</view>
			<!-- 头部结束 -->
			<view slot="top" class="search">
				<u-search placeholder="请输入设备名/位号" v-model="getData.KeyWord" @custom='search()' @search='search()'></u-search>
			</view>
			<!-- 商品列表开始 -->
			<view v-for="(item, index) in goodsList" class="goods-item-wrap" @click="goDetail(item.Id)">
				<image :src='baseImage+item.ETImages' class="goods-image"/>
				<view class="goods-content-wrap">
					<view class="goods-name">
						<!--  -->
						<!-- item.QrcodeStatus==1?stateColor1:item.QrcodeStatus==2?stateColor2:stateColor3 -->
						<view :class="item.QrcodeStatus==1?'stateColor1':item.QrcodeStatus==2?'stateColor2':'stateColor3'"></view>
						{{ item.ETName }}
					</view>

					<view class="goods-stock-wrap">
						<view class="goods-stock">车间：{{ item.ETASFarm }}</view>
						<view class="goods-sell-count">设备类型：{{ item.ETClass }}</view>
					</view>
					<view class="goods-stock-wrap1">
						<view v-if="item.QrcodeStatus==1" class="changeColor11">正常</view>
						<view v-if="item.QrcodeStatus==2" class="changeColor22">维修中</view>
						<view v-if="item.QrcodeStatus==3" class="changeColor33">故障</view>
					</view>

					<!-- <view class="goods-price">位号：{{ item.ETNumber }}</view> -->

					<!-- <view class="goods-option" @click.stop="">
						<view v-if="item.QrcodeStatus==1" class="goods-option-item changeColor1">正常</view>
						<view v-if="item.QrcodeStatus==2" class="goods-option-item changeColor2">维修中</view>
						<view v-if="item.QrcodeStatus==3" class="goods-option-item changeColor3">故障</view>
					</view> -->
					<view class="goods-option" @click.stop="">
						<view class="bottom">
							<view @click="goDetail(item.Id)"  class="btnBox">
								<view class="evaluate btn">详情</view>
							</view>
							<view  class="btnBox1">
								<view @click="qrcodeClickNoJob(item.QrcodeId)" class="evaluate1 btn1">点检</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 商品列表结束 -->
		</z-paging>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	import unifab from "@/components/beyondGod-drag/beyoundGod-drag.vue";	
	export default {
		components: {
			slFilter,unifab
		},
		data() {
			return {
				goodsList: [],
				goodsNav: 0,
				getData:{
					ETArchivesId:'',
					KeyWord:'',
					PageIndex:1,
					PageSize:10,
					Sort: 'AddTime',
					SortType: 'desc',
					ETASWorkSection:'', //科室
					ETClass:'', //设备类别
					
				},
				baseImage:this.$request22.baseUrl1,
				deviceimg:this.$request22.baseUrl1+'/Resource/Sg/device/deviceimg.png',
				themeColor: '#0079FE',
				filterResult: '',
				menuList: [{
						'title': '设备类别',
						'detailTitle': '设备类别可多选',
						'isMutiple': true,
						'key': 'deviceclass',
						'detailList': [{
								'title': '不限',
								'value': ''
							}
						]

					},
					{
							'title': '工段',
							'detailTitle': '工段可多选',
							'isMutiple': true,
							'key': 'keshi',
							'detailList': [{
									'title': '不限',
									'value': ''
								}
							]
					
						}
				]
			}
		},
		onLoad() {
		},
		mounted() {
			let that=this
			that.getSearchOptions()
		},
		methods: {
			devicecheckByScan(){
				let that = this;
				uni.scanCode({
					onlyFromCamera: false,
					success: function(res) {
						let qrcodeId=request.getRequest(res.result,'id')
						that.qrcodeClickNoJob(qrcodeId)
					},fail() {
						uni.showToast({
							title: '扫码失败',
							icon:'none',
							duration: 4000
						});
					}
				});
			},
			qrcodeClickNoJob(Id) {
				uni.showLoading({
					title: '加载中...'
				})
				let that = this;
				let opts = {
					url: 'api/SavingQrcodeDirect',
					method: 'get'
				};
				let savingRequestData={
					nfcId:'',
					qrcodeId:Id,
					jobId:'',
					longitude:'',
					latitude:'',
					isCheckDevice:true,
					isNFC:false
				}
				//获取点位详情
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy:true,
					success(res3) {
						savingRequestData.latitude = res3.latitude;
						savingRequestData.longitude = res3.longitude;
						request.httpTokenRequest(opts,savingRequestData).then(res => {
							if(res.data.code == 1){
								uni.hideLoading();
								//去答题
								uni.navigateTo({
									url: '/pages-others/deviceCheck?qrcodeid='+savingRequestData.qrcodeId+'&signid='+res.data.msg+'&noJob=1'
								})
							}
							else{
								uni.hideLoading();
								uni.showToast({ title: res.data.msg, icon: 'none' });
							}
						});
					},
					fail: function () {
						uni.hideLoading();
						uni.showToast({
							title: '定位失败，请退出登陆重新开启定位',
							icon:'none',
							duration: 4000
						});
					}
				});
			},
			resetMenuList(){
				console.log('resetMenuList')
			},
			getSearchOptions(){
				let that=this
				let opts = {
					url: 'api/GetDeviceSearchOptions',
					method: 'get'
				};
				request.httpTokenRequest(opts).then(res => {
					if(res.data.code == 1){
						console.log(res.data.data)
						let deviceclass =res.data.data.Item2
						let keshi = res.data.data.Item1
						
						//类别
						if(deviceclass.length>0){
							let datalist=[]
							let entity={
								title:'不限',
								value:''
							}
							datalist.push(entity)
							for(let i=0;i<deviceclass.length;i++){
								let entity={
									title:deviceclass[i].data,
									value:deviceclass[i].data
								}
								datalist.push(entity)
							}
							that.menuList[0].detailList=datalist
						}
						//科室
						if(keshi.length>0){
							let datalist=[]
							let entity={
								title:'不限',
								value:''
							}
							datalist.push(entity)
							for(let i=0;i<keshi.length;i++){
								let entity={
									title:keshi[i].data,
									value:keshi[i].data
								}
								datalist.push(entity)
							}
							that.menuList[1].detailList=datalist
						}
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			},
			result(val) {
				let deviceclass=val.deviceclass
				let keshi=val.keshi
				this.getData.ETASWorkSection=keshi.join()
				this.getData.ETClass=deviceclass.join()
				this.queryList(1,10)
				this.filterResult = JSON.stringify(val, null, 2)
			},
			queryList(pageNo, pageSize) {
				console.log('queryList')
				var that = this;
				uni.showLoading({
					title: '加载中...'
				})
				let opts = {
					url: 'api/GetSpotChcekDevicePageList',
					method: 'get'
				};
				that.getData.PageIndex=pageNo;
				that.getData.PageSize=pageSize;
				request.httpTokenRequest(opts,that.getData).then(res => {
					if(res.data.code == 1){
						this.$refs.paging.complete(res.data.data);
						//that.goodsList=res.data.data
						uni.hideLoading();
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			},
			// 搜索框
			search(e){
				let that=this
				that.goodsList=[]
				that.getData.PageIndex=1;
				that.getData.PageSize=10;
				that.getData.KeyWord=e
				this.queryList(1,10);
			},
			goDetail(id) {
				let opts = {
					url: 'api/GetQrcodeByDeviceId',
					method: 'get'
				};
				let requestData={
					id:id
				}
				request.httpTokenRequest(opts,requestData).then(res => {
					if(res.data.code == 1){
						let qrcodeId=res.data.msg
						// 跳转，传参
						uni.navigateTo({
							url:`/pages-device/repair/record?id=${qrcodeId}&noJob=1`
						})
						return
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
				
			},
			editStatus(id) {
				console.log("edit item id:" + id);
			},
			editPrice(id) {
				console.log("edit item id:" + id);
			},
			editStock(id) {
				console.log("edit item id:" + id);
			},
			addGoods() {
				console.log("tap add new Goods");
			},
			setNav(goodsNav) {
				console.log('setNav')
				let that=this
				that.goodsNav = goodsNav
				console.log("tap set nav " + goodsNav);
				that.goodsList=[]
				that.getData.PageIndex=1;
				that.getData.PageSize=10;
				that.getData.QrcodeStatus=goodsNav
				that.queryList(1,10);
			},
		}
	}
</script>

<style scoped lang="scss">
	.search{
		width: 100%;
		height: 100rpx;
		padding: 20rpx 2% 0 2%;
		background-color: #fff;
		// display: flex;
		// align-items: center;
	}
	.goods-main {
		min-height: 100vh;
		background: #f7f8fa;
		padding-top: 0rpx;
		padding-bottom: 240rpx;
	}

	.goods-item-wrap {
		background: #FFFFFF;
		display: flex;
		padding: 24rpx;
		margin: 12rpx;
		border-radius: 8rpx;
	}

	.goods-content-wrap {
		padding-left: 24rpx;
	}

	.goods-option {
		display: flex;
	}

	.goods-option-item {
		background: #f4f4f6;
	}

	.goods-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		flex: none;
	}
	/* 状态色 */
	.stateColor1{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 10rpx solid #fff;
		background-color: #1ab394;
		position: absolute;
		left: -45rpx;
		top: -20rpx;
	}
	.stateColor2{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 10rpx solid #fff;
		background-color: #f8ac59;
		position: absolute;
		left: -45rpx;
		top: -20rpx;
	}
	.stateColor3{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 10rpx solid #fff;
		background-color: #ed5565;
		position: absolute;
		left: -45rpx;
		top: -20rpx;
	}
	.changeColor11{
		color:#1ab394;
	}
	.changeColor22{
		color:#f8ac59;
	}
	.changeColor33{
		color:#ed5565;
	}
	.goods-name {
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		position: relative;
	}

	.goods-stock-wrap {
		display: flex;
		color: #969696;
		font-size: 24rpx;
		margin-top: 12rpx;
	}
	.goods-stock-wrap1 {
		display: flex;
		color: #969696;
		font-size: 24rpx;
		margin-top: 12rpx;
		font-size:28rpx;
		font-weight: 500;
	}
	.goods-stock {
		margin-right: 24rpx;
	}

	.goods-price {
		font-size:36rpx;
		color: #e7612e;
		margin-top: 24rpx;
	}

	.goods-option-item {
		padding: 8rpx 16rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		margin-top: 24rpx;
	}

	.goods-option-item:not(:last-child) {
		margin-right: 24rpx;
	}
	/* 需要根据状态改变颜色 */
	.goods-option-item-action {
		background: rgba(26, 179, 148, 0.2);
		color: #1ab394;
	}
	.changeColor1{
		background: rgba(26, 179, 148, 0.2);
		color: #1ab394;
	}
	.changeColor2{
		background: rgba(248, 172, 89, 0.2);
		color: #f8ac59;
	}
	.changeColor3{
		background: rgba(237, 85, 101, 0.2);
		color: #ed5565;
	}
	.goods-item-wrap {
		margin-top: 24rpx;
	}

	.goods-header-wrap {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: #FFFFFF;
	}

	.goods-header-item-action {
		font-size: 36rpx;
		font-color: #333333;
		font-weight: bold;
		position: relative;
	}

	.goods-header-item-action::after {
		position: absolute;
		left: 0;
		right: 0;
		background: #4372fe;
		height: 8rpx;
		content: "";
		bottom: -12rpx;
	}

	.goods-header-item {
		margin-right: 24rpx;
	}
	
	
	.bottom {
		margin-top: 20rpx;
		line-height: 70rpx;
		display: flex;
		align-items: right;
		.btnBox{
			width: 150rpx;
			display: flex;
			justify-content: space-between;
			float:right;
		
			.btn {
				line-height: 52rpx;
				width: 140rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-tips-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-tips-color;
			}
			.evaluate {
				color: $u-type-primary;
				border-color: $u-type-primary;
			}
		}
		.btnBox1{
			width: 150rpx;
			display: flex;
			justify-content: space-between;
			float:right;
		
			.btn1 {
				line-height: 52rpx;
				width: 140rpx;
				border-radius: 26rpx;
				font-size: 26rpx;
				text-align: center;
				color: white;
				background-color:$u-type-primary;
			}
			.evaluate1 {
				color: white;
			}
		}
	}
</style>
